<link rel="stylesheet" href="/static/index/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="/static/index/css/index.css">
<style type="text/css">
    img{
        height: 50px;
        width: 50px;
    }
</style>
<div class="container">
    <div class="row">
        <div class="col-md-9">
            {notempty name="tie"}
            <div class="card shadow my-3 border-0">
                <div class="card-header bg-white">
                    <img src="{$tie.user.avatar}" height="65" class="rounded-circle float-right mr-3"
                         data-toggle="popover" data-placement="left">
                    <h4>{$tie.title}&nbsp;<i class="fa fa-paperclip text-success"></i></h4>
                    <small class="text-black-40">
                        <i class="fa fa-user"></i>&nbsp;{$tie.user.nickname}&nbsp;发表于&nbsp;{$tie.createtime|date="Y-m-d H:i", ###}
                        <a href="" class="text-info text-decoration-none mx-2">{$tie.category.name}</a>
                        <i class="fa fa-eye"></i>&nbsp;{$tie.hits}
                    </small>
                    <div class="d-none">
                        <div class="text-muted px-4 text-nowrap">
                            <img src="{$tie.user.avatar}" height="50" class="rounded-circle float-left mr-3">
                            <h6>{$tie.user.nickname}</h6>
                            <h6>最后在线：{$tie.user.prevtime}</h6>
                            <h6>加入时间：{$tie.user.createtime}</h6>
                            <h6>主题：{$tie.tie_num}&nbsp;&nbsp;评论：</h6>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div >
                    <div class="zhengwen">
                        {$tie.content}
                    </div>
                    <div class="text-center my-2">
                        <button onclick="like()" type="button" class="btn btn-info mr-1 denglu" data-container="body"
                                data-toggle="popover" data-placement="top" data-trigger="hover" id="postzan"><i class="fa fa-thumbs-o-up"></i>&nbsp;<span>{$tie.likenum}</span>
                        </button>
                    </div>
                </div>
            </div>
            <ul class="list-group list-group-flush" id="huifulist">
                <li class="list-group-item text-black-50">
                    {$tie.tie_num}条回复&nbsp;{$tie.hits}次浏览
                    <div class="btn-group float-right">
                        <a class="btn btn-light btn-sm text-black-50" data-toggle="dropdown" href="#" role="button"><i
                                class="fa fa-sort"></i></a>
                    </div>
                </li>
                {volist name="tie.comment" id="vo" key="key"}
                <li class="list-group-item border-light">
                    <img src="{$vo.user.avatar}" height="50" class="rounded-circle float-left mr-3" data-toggle="popover"
                         data-placement="right">
                    <div class="float-right text-black-50">
                        <span>{$key}楼</span>
                    </div>
                    <small class="text-black-50">
                        <i class="fa fa-user"></i>&nbsp;{$vo.user.nickname}&nbsp;发表于&nbsp;{$vo.createtime|date="Y-m-d H:i", ###}
                    </small>
                    <h6 class="gentieneirong zhengwen">
                        {$vo.content}
                    </h6>
<!--                    <div class="mt-3">-->
<!--                        <button type="button" class="btn btn-info btn-sm mr-1 denglu jianyu_gentiezan"-->
<!--                                data-container="body" data-toggle="popover" data-placement="top" data-trigger="hover"-->
<!--                                data-content="赞一个" data-id="{$vo.id}"><i class="fa fa-thumbs-o-up"></i>&nbsp;<span>{$vo.id}</span>-->
<!--                        </button>-->
<!--                    </div>-->
                    <div class="huifudiv my-2">
                        <div class="huifudivtop"></div>
                    </div>
                    <div class="d-none">
                        <div class="text-muted px-4 text-nowrap">
                            <img src="{$tie.user.avatar}" height="50" class="rounded-circle float-left mr-3">
                            <h6>{$vo.user.nickname}</h6>
                            <h6>最后在线：{$vo.user.prevtime}</h6>
                            <h6>加入时间：{$vo.user.createtime}</h6>
                            <h6>主题：{$vo.id}&nbsp;&nbsp;评论：</h6>
                        </div>
                    </div>
                </li>
                {/volist}
                <li class="list-group-item border-light d-none" id="gentiefenge"></li>
                {notempty name="jianyu.gentie.pages"}
                <li class="list-group-item border-light">
                    <nav>
                        <ul class="pagination justify-content-center">
                            {$jianyu.gentie.pages}
                        </ul>
                    </nav>
                </li>
                {/notempty}
            </ul>
            {if condition="$uid neq ''"}
            <div class="card-body">
                <div id="gentiedivprev"></div>
                <div id="gentiediv">
                    <textarea id="content" class="form-control" rows="2" style="font-size: 16px;"></textarea>
<!--                    <textarea class="form-control d-none" rows="3" id="pinglun" name="pinglun" ></textarea>-->
                    <small class="form-text text-muted" id="gentietishi">请在上面输入跟帖内容</small>
                    <div class="text-center my-3" id="gentiebtn">
                        <button type="button" onclick="comment()" id="gentie" class="btn btn-info">评论<i class="fa fa-refresh fa-spin ml-2 d-none"></i></button>
                    </div>
                </div>
            </div>
            {else /}
            <div class="card-body text-center">
                <a class="btn btn-light denglu" href="{:url('index/user/login')}">登录后可回复</a>
            </div>
            {/if}
        </div>
        {else /}
        <div class="card shadow my-3 border-0">
            <div class="card-body text-muted">
                <i class="fa fa-truck"></i>&nbsp;您访问的内容已经搬家了
            </div>
        </div>
        {/notempty}
    </div>
</div>
</div>
<script type="application/javascript">
    function comment() {
        var content = $("#content").val()
        $.ajax({
            type: 'post',
            url: "{:url('index/tie/comment')}",
            data: {
                user_id: {$uid},
                topic_id: {$tie.id},
                content: content
            },
            dataType: 'json',
            success: function (res) {
                if (res.code == 1){
                    console.log(res)
                    layer.msg(res.msg);
                    setTimeout(function () {
                        window.location.reload();
                    }, 1500)
                }else {
                    // console.log(res)
                    setTimeout(function () {
                        window.location.reload();
                    }, 1500)
                    layer.msg(res.msg);
                }

            },
            error: function (res) {
                console.log(res.msg);
            },
        });
    }
    
    function like() {
        $.ajax({
            type: 'post',
            url: "{:url('index/tie/like')}",
            data: {
                user_id: {$uid},
                topic_id: {$tie.id},
            },
            dataType: 'json',
            success: function (res) {
                if (res.code == 1){
                    console.log(res)
                    layer.msg(res.msg);
                    setTimeout(function () {
                        window.location.reload();
                    }, 1500)
                }else {
                    // console.log(res)
                    setTimeout(function () {
                        window.location.reload();
                    }, 1500)
                    layer.msg(res.msg);
                }

            },
            error: function (res) {
                console.log(res.msg);
            },
        });
    }
</script>